<template>
  <div class="searchBar">
    <input class="searchInp" type="text" v-model="value" placeholder="Enter something..." autocomplete="off">
    <span @click="clickSearch(value)"><Icon class="searchIcon" type="search"></Icon></span>
  </div>
</template>

<script>
export default {
  name: 'searchBar',
  data () {
    return {
      value: '',
      current: 1, // 当前页码
      pageSize: 10 // 每页的数据条数
    }
  },
  methods: {
    // hideSideBar: function () {
    //   this.$emit('listenChanges', false)// 在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数
    // },
    clickSearch: function (value, done) {
      let _this = this
      _this.$emit('listenChanges', value)// 在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  .searchBar{
    width: 3.65rem;padding: 0.05rem;font-size: 0.16rem;border: 0.01rem solid #ccc;border-radius: 0.06rem;margin: 0.05rem 0.05rem 0;
    .searchInp{width: 3.08rem;line-height: 0.25rem;display: inline-block;border: none;}
    .searchIcon{
      width: 0.35rem;height: 0.25rem;display: inline-block;line-height: 0.25rem;font-size: 0.25rem;vertical-align: top;
    }
  }
</style>
